<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>用户中心 - 万万书城</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }
        .nav a:hover {
            text-decoration: underline;
        }
        .content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .user-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
        }
        h2 {
            margin-top: 0;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-weight: bold;
        }
        input[type="text"], input[type="tel"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            text-decoration: none;
        }
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        .btn-primary:hover {
            background-color: #45a049;
        }
        .btn-secondary {
            background-color: #f0f0f0;
            color: #333;
            margin-right: 10px;
        }
        .btn-secondary:hover {
            background-color: #e0e0e0;
        }
        .success-message {
            color: #4CAF50;
            text-align: center;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .error-message {
            color: #e74c3c;
            text-align: center;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .form-section {
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .form-section h3 {
            margin-top: 0;
            color: #555;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .user-info {
            color: white;
        }
        .user-info a {
            color: white;
            margin-left: 10px;
        }
        .info-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        .info-col {
            flex: 1;
            min-width: 300px;
        }
        .readonly-field {
            background-color: #f9f9f9;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-container">
            <div class="logo">万万书城</div>
            <div class="nav">
                <a href="index.jsp">首页</a>
                <a href="cart">购物车</a>
                <a href="order?action=list">我的订单</a>
                <a href="userCenter">用户中心</a>
            </div>
            <div class="user-info">
                <% if (session.getAttribute("user") != null) {
                    com.wanwanbookstore.entity.User user = (com.wanwanbookstore.entity.User) session.getAttribute("user");
                    out.println(user.getUsername() + " <a href='logout'>退出</a>");
                } else {
                    out.println("<a href='login.jsp'>登录</a> <a href='register.jsp'>注册</a>");
                }
                %>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="user-container">
            <h2>用户中心</h2>
            
            <c:if test="${not empty successMessage}">
                <div class="success-message">${successMessage}</div>
            </c:if>
            
            <c:if test="${not empty errorMessage}">
                <div class="error-message">${errorMessage}</div>
            </c:if>
            
            <!-- 联系方式修改表单 -->
            <form action="userCenter" method="post">
                <input type="hidden" name="action" value="basic">
                <div class="form-section">
                    <h3>联系方式</h3>
                    <div class="info-row">
                        <div class="info-col">
                            <div class="form-group">
                                <label for="phone">联系电话</label>
                                <input type="tel" id="phone" name="phone" value="${user.phone}" placeholder="请输入联系电话">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address">收货地址</label>
                        <input type="text" id="address" name="address" value="${user.address}" placeholder="请输入收货地址">
                    </div>
                </div>
                
                <div style="text-align: center; margin-top: 20px; margin-bottom: 30px;">
                    <button type="submit" class="btn btn-primary">保存联系方式</button>
                </div>
            </form>
            
            <!-- 用户名修改表单 -->
            <form action="userCenter" method="post">
                <input type="hidden" name="action" value="username">
                <div class="form-section">
                    <h3>修改用户名</h3>
                    <div class="info-row">
                        <div class="info-col">
                            <div class="form-group">
                                <label for="newUsername">新用户名</label>
                                <input type="text" id="newUsername" name="newUsername" placeholder="请输入新用户名">
                            </div>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-col">
                            <div class="form-group">
                                <label for="confirmUsername">确认新用户名</label>
                                <input type="text" id="confirmUsername" name="confirmUsername" placeholder="请再次输入新用户名">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="text-align: center; margin-top: 20px; margin-bottom: 30px;">
                    <button type="submit" class="btn btn-primary">修改用户名</button>
                </div>
            </form>
            
            <!-- 密码修改表单 -->
            <form action="userCenter" method="post">
                <input type="hidden" name="action" value="password">
                <div class="form-section">
                    <h3>修改密码</h3>
                    <div class="info-row">
                        <div class="info-col">
                            <div class="form-group">
                                <label for="currentPassword">当前密码</label>
                                <input type="password" id="currentPassword" name="currentPassword" placeholder="请输入当前密码">
                            </div>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-col">
                            <div class="form-group">
                                <label for="newPassword">新密码</label>
                                <input type="password" id="newPassword" name="newPassword" placeholder="请输入新密码（至少6位）">
                            </div>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-col">
                            <div class="form-group">
                                <label for="confirmPassword">确认新密码</label>
                                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入新密码">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="text-align: center; margin-top: 20px; margin-bottom: 30px;">
                    <button type="submit" class="btn btn-primary">修改密码</button>
                </div>
            </form>
            
            <!-- 注销账号表单 -->
            <div class="form-section" style="background-color: #fdf0f0; border-color: #ffcccc;">
                <h3 style="color: #d32f2f;">注销账号</h3>
                <div class="error-message" style="background-color: #fff5f5; border: 1px solid #ffdddd;">
                    <strong>警告：账号注销后，您的个人信息将被删除，订单信息将保留，请慎重操作。</strong>
                </div>
                <div style="background-color: #fff9e6; padding: 15px; border-radius: 4px; margin: 15px 0; border: 1px solid #ffeeaa;">
                    <strong>提示：如需恢复已注销账号，请联系客服 0755-23968415。</strong>
                </div>
                
                <form action="userCenter" method="post" onsubmit="return confirmLogout();">
                    <input type="hidden" name="action" value="delete">
                    <div class="info-row">
                        <div class="info-col">
                            <div class="form-group">
                                <label for="confirmDeletePassword">输入密码确认注销</label>
                                <input type="password" id="confirmDeletePassword" name="confirmDeletePassword" placeholder="请输入当前密码确认注销">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="confirmDelete" name="confirmDelete"> 我确认要注销账号，且已了解所有后果
                        </label>
                    </div>
                    
                    <div style="text-align: center; margin-top: 20px; margin-bottom: 30px;">
                        <button type="submit" class="btn" style="background-color: #d32f2f; color: white;">注销账号</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        function confirmLogout() {
            // 检查是否勾选了确认框
            var confirmBox = document.getElementById('confirmDelete');
            if (!confirmBox.checked) {
                alert('请先勾选确认注销账号的选项');
                return false;
            }
            
            // 检查是否输入了密码
            var passwordField = document.getElementById('confirmDeletePassword');
            if (!passwordField.value) {
                alert('请输入密码确认注销');
                return false;
            }
            
            // 最后的确认提示
            return confirm('您确定要注销账号吗？此操作不可撤销，您的个人信息将被删除，但订单信息将被保留。');
        }
    </script>
</body>
</html>